<%= field_wrapper **field_wrapper_args, stacked: true, data: {} do %>
  <%= content_tag :div, data: { controller: 'nested-form', nested_form_wrapper_selector_value: '.nested-form-wrapper' } do %>
    <template data-nested-form-target="template">
      <div class="nested-form-wrapper" data-new-record="true">
        <%= a_link 'javascript:void(0);', icon: 'trash', color: :red, style: :text, data: {action: "click->nested-form#remove"} do %>
          Remove <%= @field.name.singularize %>
        <% end %>
        <%= render field.template_member.component_for_view(view).new(field: field.template_member, form:, view:) %>
      </div>
    </template>

    <% field.members.each do |f| %>
      <div class="nested-form-wrapper" data-new-record="true">
        <%= a_link 'javascript:void(0);', icon: 'trash', color: :red, style: :text, data: {action: "click->nested-form#remove"} do %>
          Remove <%= @field.name.singularize %>
        <% end %>
        <%= render f.component_for_view(view).new(field: f, form:, view:) %>
        <% if field.model && field.model.errors.include?(f.id) %>
          <div class="text-red-600 mt-2 text-sm"><%= field.model.errors.messages_for(f.id).to_sentence %></div>
        <% end %>
      </div>
    <% end %>

    <div data-nested-form-target="target"></div>
    <!-- Inserted elements will be injected before that target. -->

    <%= a_link 'javascript:void(0);', icon: 'plus', color: :primary, style: :outline, data: {action: "click->nested-form#add"} do %>
      Add another <%= @field.name.singularize %>
    <% end %>
  <% end %>
<% end %>
